<template>
  <div class="project">
    <div>
      <div class="title">
        <img src="~@img/project/icon-sshyfb.png" alt="" />
        <span>项目所属产业统计</span>
      </div>
      <div class="charts" ref="chart1"></div>
    </div>
    <div>
      <div class="title">
        <img src="~@img/project/icon-ssqyfbtj.png" alt="" />
        <span>引进项目来源统计</span>
        <el-select v-model="district_type" class="long" @change="change1">
          <el-option v-for="item in options_area" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="charts" ref="chart2"></div>
    </div>
    <div>
      <div class="title">
        <img src="~@img/project/icon-qytzetj.png" alt="" />
        <span>项目亩均强度区间分布</span>
      </div>
      <div class="charts" ref="chart3"></div>
    </div>
    <div>
      <div class="title">
        <img src="~@img/project/icon-qytzetj.png" alt="" />
        <span>项目投资额区间统计</span>
      </div>
      <div class="charts" ref="chart4"></div>
    </div>
  </div>
</template>
<script>
import { ProjectAnalysis } from "@/api/project_three";
export default {
  data() {
    return {
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null,
      district_type: 1,
      options_area: [
        {
          label: "全国各省份项目占比（不包含山西省）",
          value: 1,
        },
        {
          label: "重点区域项目占比（不包含山西省内）",
          value: 2,
        },
        { label: "山西省内外项目占比", value: 3 },
      ],
    };
  },
  props: ["district"],
  watch: {
    district(newV, oldV) {
      console.log(newV);
      this.getData1();
      this.getData2();
      this.getData3();
      this.getData4();
    },
  },
  mounted() {
    console.log(this.district);
    this.initChart1();
    this.initChart2();
    this.initChart3();
    this.initChart4();
    this.upDataChart2();
    this.getData1();
    this.getData2();
    this.getData3();
    this.getData4();
  },
  methods: {
    change1() {
      this.getData2();
    },

    async getData1() {
      let res = await ProjectAnalysis({
        flag: 1,
        district: this.district,
        district_type: "",
      });
      let yAxisData = [];
      let seriesData = [];
      console.log(res);
      if (res.code && res.code != 0) {
        yAxisData = [
          "特种金属材料",
          "新型化工材料",
          "新一代电子信息制造",
          "高端装备制造",
          "新能源",
          "生物基新材料",
          "现代农业",
          "生态文旅休闲类",
          "现代服务业",
          "基础设施和社会民生类",
          "其他工业类",
        ];
        seriesData = [
          { value: 0, rate: 0 },
          { value: 0, rate: 0 },
          { value: 0, rate: 0 },
          { value: 0, rate: 0 },
          { value: 0, rate: 0 },
          { value: 0, rate: 0 },
          { value: 0, rate: 0 },
          { value: 0, rate: 0 },
          { value: 0, rate: 0 },
          { value: 0, rate: 0 },
          { value: 0, rate: 0 },
        ];
      } else {
        res.map((item) => {
          yAxisData.push(item.industry_name);
          seriesData.push({
            value: item.industry_count,
            rate: item.industry_rate || "0",
          });
        });
      }
      this.upDataChart1(yAxisData, seriesData);
    },
    async getData2() {
      let res = await ProjectAnalysis({
        flag: 2,
        district: this.district,
        district_type: this.district_type,
      });
      console.log(res);
      let seriesData = [];
      if (res.code && res.code != 0) {
      } else {
        seriesData = res.map((item) => {
          return { name: item.district, value: item.count, rate: item.rate };
        });
      }
      this.upDataChart2(seriesData);
    },
    async getData3() {
      let res = await ProjectAnalysis({
        flag: 3,
        district: this.district,
        district_type: "",
      });
      let seriesData1 = [];
      let seriesData2 = [];
      if (res.code && res.code != 0) {
        seriesData1 = [0, 0, 0, 0, 0, 0];
        seriesData2 = [0, 0, 0, 0, 0, 0];
      } else {
        seriesData1 = [
          res.taiyuan.acre_intensity_count1,
          res.taiyuan.acre_intensity_count2,
          res.taiyuan.acre_intensity_count3,
          res.taiyuan.acre_intensity_count4,
          res.taiyuan.acre_intensity_count5,
          res.taiyuan.acre_intensity_count6,
        ];
        seriesData2 = [
          res.district.acre_intensity_count1,
          res.district.acre_intensity_count2,
          res.district.acre_intensity_count3,
          res.district.acre_intensity_count4,
          res.district.acre_intensity_count5,
          res.district.acre_intensity_count6,
        ];
      }
      this.upDataChart3(seriesData1, seriesData2);
    },
    async getData4() {
      let res = await ProjectAnalysis({
        flag: 4,
        district: this.district,
        district_type: "",
      });
      let seriesData1 = [];
      let seriesData2 = [];
      if (res.code && res.code != 0) {
        seriesData1 = [0, 0, 0, 0, 0, 0];
        seriesData2 = [0, 0, 0, 0, 0, 0];
      } else {
        seriesData1 = [
          res.taiyuan.investment_volume_count1,
          res.taiyuan.investment_volume_count2,
          res.taiyuan.investment_volume_count3,
          res.taiyuan.investment_volume_count4,
          res.taiyuan.investment_volume_count5,
          res.taiyuan.investment_volume_count6,
        ];
        seriesData2 = [
          res.district.investment_volume_count1,
          res.district.investment_volume_count2,
          res.district.investment_volume_count3,
          res.district.investment_volume_count4,
          res.district.investment_volume_count5,
          res.district.investment_volume_count6,
        ];
      }
      this.upDataChart4(seriesData1, seriesData2);
    },
    initChart1() {
      this.chart1 = this.$echarts.init(this.$refs.chart1);
      let that = this;
      let option = {
        color: ["#4DA1FF"],
        grid: {
          top: "6%",
          left: "24%",
          bottom: "20%",
          right: "6%",
        },
        legend: {
          show: true,
          bottom: 0,
          left: "center",
          itemWidth: 14,
          itemHeight: 14,
          textStyle: {
            fontSize: 14,
            color: "#666",
          },
        },
        tooltip: {
          show: "true",
          formatter: function (params) {
            console.log(params);
            return (
              that.district +
              "<br/>" +
              params.marker +
              params.name +
              " " +
              params.value +
              "个项目 占比" +
              params.data.rate +
              "%"
            );
          },
        },
        xAxis: {
          type: "value",
          axisLabel: {
            show: true,
            color: "#999",
            fontSize: 10,
            interval: 0,
          },
          axisLine: {
            lineStyle: {
              color: "#EEF3F8",
              width: 1,
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          axisLabel: {
            show: true,
            color: "#999",
            fontSize: 12,
          },
          // interval: 100, //每次增加几个
          axisLine: {
            show: true,
            lineStyle: {
              color: "#EEF3F8",
              width: 1,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: "#EEF3F8",
              width: 1,
            },
          },
        },
        series: [
          {
            name: this.district + "--- 项目数量(个)",
            type: "bar",
            barWidth: 10, //柱图宽度
            itemStyle: {
              //柱形图圆角，初始化效果
              barBorderRadius: [0, 5, 5, 0],
            },
          },
        ],
      };
      this.chart1.setOption(option);
    },
    initChart2() {
      this.chart2 = this.$echarts.init(this.$refs.chart2);
      let option = {
        color: [
          "#f18870",
          "#e94520",
          "#1b54a9",
          "#1a76a5",
          "#3ed8be",
          "#34a471",
          "#ff9800",
          "#b2152c",
          "#80abeb",
          "#7bc6ea",
          "#77d5a9",
          "#ffc877",
          "#8c14f0",
          "#f07f90",
          "#2871dd",
          "#3ed8be",
          "#37af78",
          "#0484b1",
          "#eb5230",
          "#ffbd00",
          "#9bbdef",
          "#9bd3ef",
          "#619bfa",
          "#ffd699",
          "#f7b8a9",
          "#2169d3",
          "#de1a37",
          "#028458",
          "#ffff00",
          "#aa6500",
          "#f7860c",
          "#58b6e5",
          "#56ca95",
          "#ffb74c",
        ],
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            console.log(params);
            return (
              params.marker +
              " " +
              params.name +
              " ： " +
              params.data.value +
              "个项目 占比" +
              params.percent +
              "%"
            );
          },
        },
        series: [
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: [45, 85],
            // roseType: "area",

            avoidLabelOverlap: true,
            // labelLine: {
            //   show: false,
            //   length: 4,
            //   length2: 90,
            //   smooth: false,
            //   showAbove: false,
            //   lineStyle: { cap: "round" },
            // },
            label: {
              show: true,
              // position: "center",
              formatter: "{a|{b}} {a|{c}个} {a|{d}%}",
              // formatter: "{a|{b}}\n\n{a|占比:{d}%}",
              //折线图文字颜色
              rich: {
                //圆点位置大小配置
                hr: {
                  //auto自定义
                  backgroundColor: "inherit",
                  borderRadius: 12,
                  width: 12,
                  height: 12,
                  padding: [-4, -4, 0, -16],
                },
                a: {
                  fontSize: 14,
                  // fontWeight: "bold",
                },
              },
              color: "#fff",
            },
            confine: true,
            emphasis: {
              // labelLine: {
              //   show: true,
              // },
              label: {
                show: true,
              },
            },
            select: {
              label: {
                show: true,
              },
            },
            itemStyle: {
              borderRadius: 8,
            },
            zoom: 0.8,
            selectedMode: "single",
          },
        ],
      };
      this.chart2.setOption(option);
    },
    initChart3() {
      this.chart3 = this.$echarts.init(this.$refs.chart3);
      let option = {
        color: [
          new this.$echarts.graphic.LinearGradient(1, 1, 0, 0, [
            { offset: 0, color: "#18C7B8" },
            { offset: 1, color: "#19D0B2" },
          ]),
        ],
        grid: {
          top: 30,
          left: "8%",
          bottom: "20%",
          right: "2%",
        },
        legend: {
          show: true,
          bottom: 0,
          itemWidth: 14,
          itemHeight: 14,
          color: ["#3ED8BE", "#FF7E7E"],
          textStyle: {
            fontSize: 14,
            color: "#666",
          },
        },
        tooltip: {
          show: "true",
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          axisLabel: {
            show: true,
            color: "#999",
            fontSize: 12,
            interval: 0,
          },
          axisLine: {
            lineStyle: {
              color: "#EEF3F8",
              width: 1,
            },
          },
          axisTick: {
            show: false,
          },
          data: [
            "0-50万",
            "50-100万",
            "100-200万",
            "200-300万",
            "300-500万",
            "500万以上",
          ],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            color: "#A9B0B9",
            fontSize: 12,
          },
          // interval: 100, //每次增加几个
          axisLine: {
            show: true,
            lineStyle: {
              color: "#EEF3F8",
              width: 1,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: "#EEF3F8",
              width: 1,
            },
          },
        },
        series: [
          {
            name: "太原市",
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#FF7E7E",
            },
            symbolSize: 9,
            areaStyle: {
              color: "rgba(255, 126, 126,.2)",
            },
          },
          {
            name: this.district,
            type: "bar",
            barWidth: 26, //柱图宽度
            itemStyle: {
              //柱形图圆角，初始化效果
              barBorderRadius: [8, 8, 0, 0],
            },
          },
        ],
      };
      this.chart3.setOption(option);
    },
    initChart4() {
      this.chart4 = this.$echarts.init(this.$refs.chart4);
      let option = {
        color: [
          new this.$echarts.graphic.LinearGradient(1, 1, 0, 0, [
            { offset: 0, color: "#4DA1FF" },
            { offset: 1, color: "#ADD4FF" },
          ]),
        ],
        grid: {
          top: 30,
          left: "8%",
          bottom: "20%",
          right: "2%",
        },
        legend: {
          show: true,
          bottom: 0,
          itemWidth: 14,
          itemHeight: 14,
          color: ["#4DA1FF", "#FF7E7E"],
          textStyle: {
            fontSize: 14,
            color: "#666",
          },
        },
        tooltip: {
          show: "true",
          trigger: "axis",
          // formatter: function(param) {
          //   console.log(param);
          //   return (
          //     param[0].name +
          //     "<br />" +
          //     param[0].marker +
          //     " " +
          //     param[0].seriesName +
          //     " 区间 " +
          //     param[0].value +
          //     "个项目<br />" +
          //     param[1].marker +
          //     " " +
          //     param[1].seriesName +
          //     " 区间 " +
          //     param[1].value +
          //     "个项目"
          //   );
          // },
        },
        xAxis: {
          type: "category",
          axisLabel: {
            show: true,
            color: "#999",
            fontSize: 12,
            interval: 0,
          },
          axisLine: {
            lineStyle: {
              color: "#EEF3F8",
              width: 1,
            },
          },
          axisTick: {
            show: false,
          },
          data: [
            "0-1亿",
            "1-5亿",
            "5-10亿",
            "10-30亿",
            "30-100亿",
            "100亿以上",
          ],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            color: "#A9B0B9",
            fontSize: 12,
          },
          // interval: 100, //每次增加几个
          axisLine: {
            show: true,
            lineStyle: {
              color: "#EEF3F8",
              width: 1,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: "#EEF3F8",
              width: 1,
            },
          },
        },
        series: [
          // {
          //   name: "太原市",
          //   type: "bar",
          //   barWidth: 26, //柱图宽度
          //   itemStyle: {
          //     //柱形图圆角，初始化效果
          //     barBorderRadius: [8, 8, 0, 0],
          //   },
          // },
          // {
          //   name: this.district,
          //   type: "line",
          //   smooth: true,
          //   itemStyle: {
          //     color: "#FF7E7E",
          //   },
          //   symbolSize: 9,
          //   areaStyle: {
          //     color: "rgba(255, 126, 126,.2)",
          //   },
          // },
          {
            name: "太原市",
            type: "line",
            smooth: true,
            itemStyle: {
              color: "#FF7E7E",
            },
            symbolSize: 9,
            areaStyle: {
              color: "rgba(255, 126, 126,.2)",
            },
          },
          {
            name: this.district,
            type: "bar",
            barWidth: 26, //柱图宽度
            itemStyle: {
              //柱形图圆角，初始化效果
              barBorderRadius: [8, 8, 0, 0],
            },
          },
        ],
      };
      this.chart4.setOption(option);
    },
    upDataChart1(yAxisData, seriesData) {
      let options = {
        yAxis: {
          data: yAxisData.reverse(),
        },
        series: [
          {
            name: this.district + "--- 项目数量(个)",
            data: seriesData.reverse(),
          },
        ],
      };
      this.chart1.setOption(options);
    },
    upDataChart2(seriesData) {
      let options = {
        series: [
          {
            data: seriesData,
          },
        ],
      };
      this.chart2.setOption(options);
    },
    upDataChart3(seriesData1, seriesData2) {
      let options = [];
      if (this.district == "太原市") {
        options = {
          series: [
            {
              name: "",
              data: [],
              type: "line",
              smooth: true,
              itemStyle: {
                color: "#FF7E7E",
              },
              symbolSize: 9,
              areaStyle: {
                color: "rgba(255, 126, 126,.2)",
              },
            },
            {
              type: "bar",
              barWidth: 26, //柱图宽度
              itemStyle: {
                //柱形图圆角，初始化效果
                barBorderRadius: [8, 8, 0, 0],
              },
              name: "太原市",
              data: seriesData1,
            },
          ],
        };
      } else {
        options = {
          series: [
            {
              name: "太原市",
              data: seriesData1,
              type: "line",
              smooth: true,
              itemStyle: {
                color: "#FF7E7E",
              },
              symbolSize: 9,
              areaStyle: {
                color: "rgba(255, 126, 126,.2)",
              },
            },
            {
              type: "bar",
              barWidth: 26, //柱图宽度
              itemStyle: {
                //柱形图圆角，初始化效果
                barBorderRadius: [8, 8, 0, 0],
              },
              name: this.district,
              data: seriesData2,
            },
          ],
        };
      }

      this.chart3.setOption(options);
    },
    upDataChart4(seriesData1, seriesData2) {
      let options = [];
      if (this.district == "太原市") {
        options = {
          series: [
            {
              name: "",
              data: [],
              type: "line",
              smooth: true,
              itemStyle: {
                color: "#FF7E7E",
              },
              symbolSize: 9,
              areaStyle: {
                color: "rgba(255, 126, 126,.2)",
              },
            },
            {
              type: "bar",
              barWidth: 26, //柱图宽度
              itemStyle: {
                //柱形图圆角，初始化效果
                barBorderRadius: [8, 8, 0, 0],
              },
              name: "太原市",
              data: seriesData1,
            },
          ],
        };
      } else {
        options = {
          series: [
            {
              name: "太原市",
              data: seriesData1,
              type: "line",
              smooth: true,
              itemStyle: {
                color: "#FF7E7E",
              },
              symbolSize: 9,
              areaStyle: {
                color: "rgba(255, 126, 126,.2)",
              },
            },
            {
              type: "bar",
              barWidth: 26, //柱图宽度
              itemStyle: {
                //柱形图圆角，初始化效果
                barBorderRadius: [8, 8, 0, 0],
              },
              name: this.district,
              data: seriesData2,
            },
          ],
        };
      }
      this.chart4.setOption(options);
    },
  },
};
</script>
<style lang="less" scoped>
.project {
  width: 100%;
  height: calc(100vh - 240px);

  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px 30px;
}

.project>div {
  position: relative;
  box-sizing: border-box;
  padding: 20px;
  background: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
  border-radius: 10px;
  text-align: left;

  img {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    vertical-align: middle;
  }

  span {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    vertical-align: middle;
  }
}

.el-select {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 120px;
  height: 26px;
  background: #ffffff;
  border-radius: 5px;
}

/deep/ .el-input--suffix .el-input__inner {
  width: 120px;
  height: 26px;
  background: #ffffff;
  border: 1px solid #5889dc;
  border-radius: 5px;
}

/deep/ .el-input__icon {
  line-height: 26px;
}

.long.el-select {
  width: 288px;
}

.long /deep/ .el-input--suffix .el-input__inner {
  width: 288px;
}

.charts {
  width: 100%;
  height: calc(100% - 27px);
}

/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1512 * 790
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {}

/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {}

/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {}

/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  .left {
    flex: 0 0 240px;
  }
}

/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .bottom-text {
    font-size: 12px;
  }

  .project>div span {
    font-size: 12px;
  }

  .project>div span {
    font-size: 14px;
  }

  /deep/ .long.el-select {
    width: 120px;
  }

  /deep/ .long .el-input--suffix .el-input__inner {
    width: 120px;
  }
}

/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {}</style>
